
import React from 'react';
import $ from 'jquery';
//import 'chosen-js';
//import 'chosen-js/chosen.css';

// 集成jQuery Chosen插件


class SomePlugin extends React.Component {
    componentDidMount() {
        console.log('this.el',this.el)
        this.$el = $(this.el);
        console.log('this.$el',this.$el)
        //this.$el.somePlugin();
    }
  
    componentWillUnmount() {
        //this.$el.somePlugin('destroy');
    }
  
    render() {
        return <div ref={el => this.el = el} />;
    }
}

function Example() {
    return (
      <Chosen onChange={value => {
        console.log('value',value)
      }}>
        <option>vanilla</option>
        <option>chocolate</option>
        <option>strawberry</option>
      </Chosen>
    );
}

class Chosen extends React.Component {
    componentDidMount() {
        this.$el = $(this.el);
        //this.$el.chosen();

        this.handleChange = this.handleChange.bind(this);
        this.$el.on('change', this.handleChange);
    }
    
    componentWillUnmount() {
        this.$el.off('change', this.handleChange);
        //this.$el.chosen('destroy');
    }

    handleChange(e) {
        this.props.onChange(e.target.value);
    }


    componentDidUpdate(prevProps) {
        if (prevProps.children !== this.props.children) {
            this.$el.trigger("chosen:updated");
        }
    }

    render() {
      return (
        <div>
          <select className="Chosen-select" ref={el => this.el = el}>
            {this.props.children}
          </select>
        </div>
      );
    }
}


function IntegratingWithOtherLibraries() {
    return <div>
        {/* <SomePlugin /> */}
        <Example/>
    </div>
}

export default IntegratingWithOtherLibraries;

